<template>
	<view class="diy-seckill" v-if="dataList.length" :style="{ backgroundColor: value.backgroundColor, padding: value.padding * 2 + 'rpx 20rpx' }">
		<view class="diy-seckill-top">
			<view class="seckill-title">
				<block  v-if="value.list">
				<image class="left-img" :src="$util.img(value.list.imageUrl)" v-if="value.list.imageUrl"></image>
				<text class="seckill-title-name">{{ value.list.title }}</text>
				</block>
				<!-- <text class="seckill-title-time">{{ timeList[index].name }} {{ timeList[index].seckill_start_time_show + '~' + timeList[index].seckill_end_time_show }}</text> -->
				<view class="seckill-title-time ns-border-color" v-if="isNow">
					<view class="seckill-title-name">距结束</view>
					<view class="seckill-H">{{ seckillH }}</view>
					<view class="symbol">:</view>
					<view class="seckill-I">{{ seckillI }}</view>
					<view class="symbol">:</view>
					<view class="seckill-S">{{ seckillS }}</view>
				</view>
			</view>
			<block  v-if="value.list">
			<view class="seckill-more" @click="toMore()" :style="{ color: value.moreTextColor }">{{ value.listMore.title }}</view>
			</block>
		</view>

		<view class="diy-seckill-bos">
			<scroll-view class="diy-seckill-box" scroll-x="true" show-scrollbar="true">
				<view class="seckill-box-item" v-for="(item, i) in dataList" :key="i" @click="toDetail(item.id)">
					<view class="seckill-item">
						<image :src="$util.img(item.sku_image, { size: 'mid' })" @error="imageError(i)" class="seckill-item-image"></image>
						<text class="seckil-name" v-if="value.isShowGoodsName">{{ item.goods_name }}</text>
						<text class="seckill-item-old-price" v-if="value.isShowGoodsPrice">￥{{ item.price }}</text>
						<text class="seckill-item-new-price ns-text-color" v-if="value.isShowGoodsPrimary">￥{{ item.seckill_price }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue';
export default {
	name: 'diy-seckill',
	props: {
		value: {
			type: Object
		}
	},
	components: {
		nsShowToast
	},
	data() {
		return {
			seckillId: 0,
			index: null,
			timeList: [],
			dataList: [],
			isNow: false,
			seckillH: '',
			seckillI: '',
			seckillS: '',
			seckillName: ''
		};
	},
	created() {
		this.getTimeList();
	},
	methods: {
		getTimeList() {
			this.$api.sendRequest({
				url: '/seckill/api/seckill/lists',
				success: res => {
					let data = res.data;
					let time = new Date(res.timestamp * 1000); //当前时间

					let newTimes = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds(); //获取当前时间 时分秒的时间戳
					data.list.forEach((v, k) => {
						if (v.seckill_start_time <= newTimes && newTimes < v.seckill_end_time) {
							this.seckillId = v.seckill_id;
							this.index = k;
							// this.seckillName = v.name;
							this.isNow = true;
						}
					});

					if (!this.seckillId) {
						for (let i = 0; i < data.list.length; i++) {
							if (newTimes < data.list[i].seckill_start_time && i == 0) {
								this.seckillId = data.list[i].seckill_id;
								this.index = i;
							} else if (newTimes < data.list[i].seckill_start_time && newTimes > data.list[i - 1].seckill_end_time && i != 0) {
								this.seckillId = data.list[i].seckill_id;
								this.index = i;
							} else if (i == data.list.length - 1 && newTimes > data.list[i].seckill_end_time) {
								this.seckillId = data.list[i].seckill_id;
								this.index = i;
							}
						}
					}

					if (this.isNow) {
						var self = this;
						setInterval(function() {
							let currTime = new Date();
							let newTimes = currTime.getHours() * 60 * 60 + currTime.getMinutes() * 60 + currTime.getSeconds();
							var obj = self.$util.countDown(data.list[self.index].seckill_end_time - newTimes);
							self.seckillH = obj.h;
							self.seckillI = obj.i;
							self.seckillS = obj.s;
						}, 1000);
					}
					this.timeList = data.list;
					this.getDataList(this.seckillId);
				}
			});
		},
		getDataList(seckillId) {
			this.$api.sendRequest({
				url: '/seckill/api/seckillgoods/page',
				data: {
					seckill_id: seckillId
				},
				success: res => {
					var data = res.data;
					if (data.list) {
						this.dataList = data.list;
					}
				}
			});
		},
		toMore() {
			this.$util.redirectTo('/promotionpages/seckill/list/list');
		},
		toDetail(id) {
			if (this.isNow) {
				this.$util.redirectTo('/promotionpages/seckill/detail/detail', {
					id: id
				});
			} else {
				this.$util.showToast({
					title: '活动还未开始，敬请期待'
				});
			}
		},
		imageError(index) {
			this.dataList[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}
.diy-seckill {
	width: 100%;
	padding: $ns-padding;
	box-sizing: border-box;
	// background: #f7f7f7;
}

.diy-seckill-top {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;

	.seckill-title {
		width: 70%;
		display: flex;
		align-items: center;

		.left-img {
			width: 50rpx;
			height: 50rpx;
			margin-right: 10rpx;
		}

		.seckill-title-name {
			font-size: $ns-font-size-lg;
			font-weight: bold;
		}

		.seckill-title-time {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.seckill-title-name {
				margin-right: 7rpx;
				margin-left: 18rpx;
				line-height: 1;
				color: #777777;
				font-size: $ns-font-size-x-sm;
			}
			.symbol {
				padding-left: 6rpx;
				padding-right: 6rpx;
				height: 28rpx;
				line-height: 24rpx;
			}
			.seckill-H {
				width: 28rpx;
				height: 28rpx;
				background-color: #383838;
				color: #ffffff;
				font-size: $ns-font-size-x-sm;
				text-align: center;
				line-height: 28rpx;
				border-radius: 5rpx;
			}
			.seckill-I {
				width: 28rpx;
				height: 28rpx;
				background-color: #383838;
				color: #ffffff;
				font-size: $ns-font-size-x-sm;
				text-align: center;
				line-height: 28rpx;
				border-radius: 5rpx;
			}
			.seckill-S {
				width: 28rpx;
				height: 28rpx;
				background-color: #ff8143;
				color: #ffffff;
				font-size: $ns-font-size-x-sm;
				text-align: center;
				line-height: 28rpx;
				border-radius: 5rpx;
			}
		}
		// .seckill-title-time {
		// 	width: 220rpx;
		// 	height: 40rpx;
		// 	border-radius:18px;
		// 	overflow: hidden;
		// 	display: flex;
		// 	border: 1px solid #FF0137;
		// 	margin-left: 25rpx;
		// 	view {
		// 		&:nth-child(1) {
		// 			width: 100rpx;
		// 			height: 40rpx;
		// 			background-color: #FF0137;
		// 			color: #fff;
		// 			font-size: 20rpx;
		// 			text-align: center;
		// 			line-height: 40rpx;
		// 		}
		// 		&:nth-child(2) {
		// 			flex: 1;
		// 			font-size: 20rpx;
		// 			text-align: center;
		// 			color: #FF0137;
		// 			line-height: 40rpx;
		// 		}
		// 	}
		// }
	}

	.seckill-more {
		font-size: $ns-font-size-base;
		color: #858585;
	}

	.seckill-more::after {
		font-family: 'iconfont';
		content: '\e6a3';
		font-size: $ns-font-size-lg;
		line-height: 1;
		position: relative;
		top: 2rpx;
		margin-left: 4rpx;
	}
}
.diy-seckill-bos {
	width: 702rpx;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 10rpx;
	overflow: hidden;
	margin-top: 20rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.diy-seckill-box {
	width: 100%;
	/*white-space 不能丢  */
	white-space: nowrap;
	box-sizing: border-box;
	margin-top: 25rpx;
	overflow: hidden;
	border-radius: 10rpx;
}

.seckill-box-item {
	width: 33%;
	height: 100%;
	display: inline-block;
	background: #ffffff;

	.seckill-item {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.seckill-item-image {
		width: 215rpx;
		height: 222rpx;
		margin: 0 auto;
	}

	.seckil-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: $ns-font-size-base;
		display: block;
		width: 100%;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.seckill-item-new-price {
		// text-align: center;
		font-size: $ns-font-size-lg;
		// font-weight: bold;
		line-height: 1;
		margin-top: 11rpx;
	}

	.seckill-item-old-price {
		// text-align: center;
		font-size: $ns-font-size-sm;
		color: #777;
		text-decoration: line-through;
		line-height: 1;
		margin-top: 13rpx;
	}
}
</style>
